<style scoped></style>

<template>
    <div>
        <Card dis-hover>
            <div class="page-body">
                <Form ref="queryForm" label-position="top">
                    <Row :gutter="16">
                        <Col span="6">
                            <FormItem label="标题" style="width:100%">
                                <Input v-model="pagerequest.title" placeholder="" clearable></Input>
                            </FormItem>
                        </Col>
                        <Col span="5">
                            <FormItem label="所属地区" style="width:100%">
                                <RegionSelect v-model="pagerequest.regionId"></RegionSelect>
                            </FormItem>
                        </Col>
                        <Col span="3">
                            <FormItem label="首页推荐">
                                <Select v-model="pagerequest.showOnHome" clearable>
                                    <Option value="true">是</Option>
                                    <Option value="false">否</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="3">
                            <FormItem label="幻灯片">
                                <Select v-model="pagerequest.inSlider" clearable>
                                    <Option value="true">是</Option>
                                    <Option value="false">否</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="4">
                            <FormItem label=" ">
                                <Button
                                    icon="ios-search"
                                    type="primary"
                                    size="small"
                                    @click="search"
                                >{{L('Find')}}</Button>
                                <Button
                                    @click="create"
                                    icon="md-add"
                                    type="primary"
                                    size="small"
                                    class="toolbar-btn"
                                >{{L('Add')}}</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <div class="margin-top-10">
                    <Table
                        :loading="loading"
                        :columns="columns"
                        :no-data-text="L('NoDatas')"
                        border
                        :data="list"
                    >
                        <template slot-scope="{ row }" slot="action">
                            <Dropdown @on-click="actionClick(row,$event)" :transfer="true">
                                <a href="javascript:void(0)">
                                    {{L('Actions')}}
                                    <Icon type="ios-arrow-down"></Icon>
                                </a>
                                <DropdownMenu slot="list">
                                    <DropdownItem name="edit">{{L('Edit')}}</DropdownItem>
                                    <DropdownItem name="delete">{{L('Delete')}}</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </template>
                    </Table>
                    <Page
                        show-sizer
                        class-name="fengpage"
                        :total="totalCount"
                        class="margin-top-10"
                        @on-change="pageChange"
                        @on-page-size-change="pagesizeChange"
                        :page-size="pageSize"
                        :current="currentPage"
                    ></Page>
                </div>
            </div>
        </Card>
        <create-floor v-model="createModalShow" @save-success="getpage"></create-floor>
        <edit-floor v-model="editModalShow" @save-success="getpage"></edit-floor>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import appconst from "@/lib/appconst";
import PageRequest from "@/store/entities/page-request";
import CreateFloor from "./create-Floor.vue";
import EditFloor from "./edit-Floor.vue";
import Ajax from "@/lib/ajax";
import RegionSelect from "@/components/region-select.vue";
class PageFloorRequest extends PageRequest {
    title: string;
    regionId: number;
    showOnHome: boolean = null;
    inSlider: boolean = null;
}
@Component({
    components: { CreateFloor, EditFloor, RegionSelect }
})
export default class extends AbpBase {
    edit() {
        this.editModalShow = true;
    }
    get cateList() {
        return this.$store.state.floor.allCateList;
    }
    //filters
    pagerequest: PageFloorRequest = new PageFloorRequest();

    createModalShow: boolean = false;
    editModalShow: boolean = false;

    get list() {
        return this.$store.state.floor.list;
    }
    get loading() {
        return this.$store.state.floor.loading;
    }
    create() {
        this.createModalShow = true;
    }

    pageChange(page: number) {
        this.$store.commit("floor/setCurrentPage", page);
        this.getpage();
    }
    pagesizeChange(pagesize: number) {
        this.$store.commit("floor/setPageSize", pagesize);
        this.getpage();
    }
    search() {
        this.$store.commit("floor/setCurrentPage", 1);
        this.getpage();
    }
    async getpage() {
        this.pagerequest.maxResultCount = this.pageSize;
        this.pagerequest.skipCount = (this.currentPage - 1) * this.pageSize;

        await this.$store.dispatch({
            type: "floor/getAll",
            data: this.pagerequest
        });
    }
    get pageSize() {
        return this.$store.state.floor.pageSize;
    }
    get totalCount() {
        return this.$store.state.floor.totalCount;
    }
    get currentPage() {
        return this.$store.state.floor.currentPage;
    }
    async created() {
        this.getpage();
    }
    actionClick(row, e) {
        switch (e) {
            case "edit":
                this.$store.commit("floor/edit", row);
                this.edit();
                break;
            case "delete":
                this.$Modal.confirm({
                    title: this.L("Tips"),
                    content: "你确定要删除这条记录吗",
                    okText: "确定",
                    cancelText: "取消",
                    onOk: async () => {
                        await this.$store.dispatch({
                            type: "floor/delete",
                            data: row
                        });
                        await this.getpage();
                    }
                });
                break;
            default:
                break;
        }
    }
    columns = [
        {
            title: "标题",
            key: "title"
        },
        {
            title: "参考价格",
            key: "price",
            width: 120
        },
        {
            title: "所属地区",
            key: "regionFullName"
        },
        {
            title: "首页推荐",
            width: 100,
            render: (h: any, params: any) => {
                return h("span", params.row.showOnHome ? "是" : "否");
            }
        },
        {
            title: "幻灯片",
            width: 100,
            render: (h: any, params: any) => {
                return h("span", params.row.inSlider ? "是" : "否");
            }
        },
        {
            title: "创建日期",
            key: "creationTime",
            width: 150,
            render: (h: any, params: any) => {
                return h("span", this.localDate(params.row.creationTime));
            }
        },
        {
            title: this.L("Actions"),
            slot: "action",
            width: 80,
            align: "center"
        }
    ];
}
</script>